<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- card部分 -->
        <el-card>
            <!-- 按钮部分 -->
            <el-button class="categorybtn" type="primary" @click="categoriesFormVisible=true">添加分类</el-button>
            <!-- 商品table部分,需要引用vue-table-with-tree-grid -->
            <tree-table
                :data="categoriesData"
                :columns="columns"
                :selection-type="false"
                show-index
                index-text="#"
                border
                :expand-type="false"
                :show-row-hover="false"
                class="tree-table">
                <template slot="isok" slot-scope="scope">
                    <i 
                        v-if="scope.row.cat_deleted === false"
                        class="el-icon-success"></i>
                </template>
                <template slot="order" slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.cat_level ===0">一级</el-tag>
                    <el-tag size="mini" v-if="scope.row.cat_level ===1" type="success">二级</el-tag>
                    <el-tag size="mini" v-if="scope.row.cat_level ===2" type="info">三级</el-tag>
                </template>
                <template slot="opt" slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger"  size="mini" icon="el-icon-delete">删除</el-button>
                </template>
            </tree-table>
            <!-- 分页器 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 20, 30]"
                :current-page="queryPage.pagenum"
                :page-size="queryPage.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalnum">
            </el-pagination>
        </el-card>

        <!-- addcategories的 dialog -->
        <el-dialog title="收货地址"
            @close="categoriesDialogClose"
            :visible.sync="categoriesFormVisible">
            <el-form 
                :model="categoriesForm" 
                ref="categoriesFormRef">
                <el-form-item label="分类名称" label-width="80px" >
                    <el-input v-model="categoriesForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类" label-width="80px">
                <!-- 级联选择器 需要定义选项（数据）以及对应选项（数据）的配置 -->
                    <el-cascader
                        v-model="selectkeys"
                        :options="options"
                        :props="defaultparams"
                        clearable
                        @change="handleChange">
                    </el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="categoriesFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitCategories">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    data(){
        return{
            inputvalue:"",
            categoriesData:[],//当前的数据
            currentPage:1,//当前的页码
            totalnum:0,
            selectkeys:[],
            categoriesForm:{
                cat_name:"",
                cat_pid:0,
                cat_level:0
            },//添加表单数据
            categoriesFormVisible:false,
            queryPage:{
                pagenum:1,//当前的页码
                pagesize:5//每页显示多少条数据
            },
            columns:[
                {label:"分类名称",prop:"cat_name"},
                {label:"是否有效",prop:"",type:"template",template:"isok"},
                {label:"排序",prop:"",type:"template",template:"order"},
                {label:"操作",prop:"",type:"template",template:"opt"}
            ],
            options:[],//当前的数据
            selectValue:[],//选中的值
            defaultparams:{
                label:"cat_name",
                value:"cat_id",
                children:"children",
                checkStrictly:true
            }
        }
    },
    created(){
        this.getCategoriesData();
    },
    methods:{
        async getCategoriesData(){
            let {data:res} = await this.$axios.get("http://timemeetyou.com:8889/api/private/v1/categories",
            {params:this.queryPage})
            if (res.meta.status !== 200) {
                this.$message.error("获取商品数据错误!");
            }
            this.categoriesData = res.data.result;
            console.log(this.categoriesData)
            this.totalnum = res.data.total;
            this.options = res.data.result;
        },
        //pagesize改变时触发
        async handleSizeChange(val){
            this.queryPage.pagesize = val;
            this.getCategoriesData();
        },  
        //pagenum改变触发
        async handleCurrentChange(val){
            this.queryPage.pagenum = val;
            this.getCategoriesData();
        },
        handleChange(value){
            // 这个value值等同于selectkeys
            if(value.length>0){
                this.categoriesForm.cat_level = value.length;//设置分类层级
                this.categoriesForm.cat_pid  = value[value.length-1];//设置父分类id
            }
            else{
                this.categoriesForm.cat_level = 0;
                this.categoriesForm.cat_pid  = 0;
            }
        },
        submitCategories(){
            this.$refs.categoriesFormRef.validate(async valid=>{
                if(valid){
                    let {data:res} =await this.$axios.post("http://timemeetyou.com:8889/api/private/v1/categories",this.categoriesForm)
                    if(res.meta.status ===201){
                        this.$message.success("创建数据成功！")
                         this.getCategoriesData();
                    }
                    console.log("submit成功");
                    this.categoriesFormVisible = false;
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        categoriesDialogClose(){
            this.$refs.categoriesFormRef.resetFields();
            this.categoriesForm.cat_level = 0;
            this.categoriesForm.cat_pid  = 0;
            this.categoriesForm.cat_name  = "";
            this.selectkeys =[];
        }
        
    }
}
</script>

<style lang="less" scoped>
    .el-breadcrumb{
        margin-bottom: 15px;
    }
    .categorybtn{
        margin-bottom: 15px;
    }
    .el-table{
        margin-bottom: 15px;
        font-size: 12px;
        color: #000;
    }
    .el-icon-success{
        color: lightgreen;
    }
    .tree-table{
        margin-bottom: 15px;
    }
    // .el-input{
    //     width: 80%;
    // }
    .el-cascader{
        width: 100%;
    } 
</style>